<template>
    <view class="content">
        <sl-filter :themeColor="themeColor" :menuList="menuList" @result="result"></sl-filter>
				
		<navigator v-for="(item,index) in houseall"  :url="'../discover/houseDetail?house_id='+item.id"  hover-class="navigator-hover">		
		<view class="visitprint" >
				<image v-if="item.image" class="left" :src="siteUrl+item.image"></image>
				<image v-else class="left" :src="siteUrl+item.images.split(',',1)"></image>
				
				<view class="right">
					<view class="title">
						{{item.title}}
					</view>
					<view class="location">
						<image src="/static/img/icon-location.png"></image>
						<view class="note">{{item.location_near}}</view>
					</view>
					<view class="price">
						<font style="font-size:40rpx;color:#FF635C">{{item.price}}</font>元/月
					</view>				
				</view>		
		</view>
		</navigator>
		<uni-load-more  :loadingType="loadingType" :contentText="contentText" :status="status"></uni-load-more>	
		
		
		
	</view>
</template>

<script>
	var _self,
	page = 1,
	timer = null;
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
    import slFilter from '@/components/sl-filter/sl-filter.vue';
    export default {
        components: {
            slFilter,uniLoadMore
        },
        data() {
            return {
				houseall:[],  //房源列表
				keywords:'', //关键词搜索
				siteUrl:this.websiteUrl,
				single:'',
				area_id:0,
				sort:'',
				price:0,
				status: 'more',
				loadingText: '加载中...',
				loadingType: 2,//定义加载方式 0---contentdown  1---contentrefresh 2---contentnomore
				contentText: {
				    contentdown:'上拉显示更多',
				    contentrefresh: '正在加载...',
				    contentnomore: '没有更多数据了'
				},
                themeColor: '#000000',
                filterResult: '',
                menuList: [{
                        'title': '区域',
                        'detailTitle': '请选择区域',
                        'isMutiple': false,
                        'key': 'area_id',
                        'detailList':[]
                    },
                    {
                        'title': '价格',
                        'key': 'price',
                        'isMutiple': false,
                        'detailTitle': '请选择价格范围',
                        'detailList': [{
                                'title': '价格',
                                'value': ''
                            },
							{
                                'title': '1000~2000',
                                'value': '1'
                            },
                            {
                                'title': '2000~3000',
                                'value': '2'
                            },
                            {
                                'title': '3000~4000',
                                'value': '3'
                            },
                            {
                                'title': '9000~10000',
                                'value': '4'
                            },
                            {
                                'title': '10000以上',
                                'value': '5'
                            }
                        ]

                    },
                    {
                        'title': '户型',
                        'key': 'single',
                        'isMutiple': false,
                        'detailTitle': '请选择户型',
                        'detailList':[],
                    },
                    {
                        'title': '排序',
                        'key': 'sort',
                        'isSort': true,
                        'detailList': [{
                                'title': '筛选',
                                'value': ''
                            },
                            {
                                'title': '发布时间',
                                'value': 'addtime'
                            },
                            {
                                'title': '从低到高',
                                'value': 'low'
                            },
                            {
                                'title': '从高到低',
                                'value': 'high'
                            }
                        ]
                    }
                ]
            }
        },
        onLoad(e) {
		   _self= this
		   //热搜词入库
		   this.hotwords(e.keywords)
		   
		   if(e.keywords){
			   _self.keywords = e.keywords
			   let webView =this.$mp.page.$getAppWebview();
			   webView.setTitleNViewSearchInputText(this.keywords)	 
		   }		   
		   this.changeMenuListDetailList();
		   this.gethouseall(); 
		   
        },
		onPullDownRefresh: function() {
			//下拉刷新的时候请求一次数据
			
		    this.gethouseall()					
		},
		onReachBottom: function() {
			//触底的时候请求数据，即为上拉加载更多
			//为了更加清楚的看到效果，添加了定时器
		    if (timer != null) {
		        clearTimeout(timer);
		    }		   
			 _self.getmorenews();
		},
        methods: {
			hotwords($keywords){				
				uni.request({
					url: this.websiteUrl+'/userapi.php/Trends/hotkeywordsAdd',
					method: 'POST',
					header: {
						'content-type':'application/x-www-form-urlencoded'						
					},
					data: {keywords:$keywords},
					success: res => {
						
					},
					fail: () => {},
					complete: () => {}
				});
				
				
			},		
            result(val) {
              // console.log('filter_result:' + JSON.stringify(val));
                this.filterResult = JSON.stringify(val, null, 2)
				_self.single = val.single
				_self.area_id = val.area_id
				_self.price = val.price
				_self.sort = val.sort
				page = 1;			
				_self.status = 'more'
				uni.showNavigationBarLoading();			
            	uni.request({
            			url: this.websiteUrl+'/userapi.php/house/houseList?page=1',
            			method: 'POST',
            			header: {
            				'content-type':'application/x-www-form-urlencoded'						
            			},
            			data: {
							keywords:_self.keywords,
            				layout:_self.single,
            				area_id:_self.area_id,
            				price: _self.price,
            				sort:_self.sort
            			},						
            			success: function(res){
							page++
            				_self.houseall = res.data.data.data
            				uni.hideNavigationBarLoading();
            				uni.stopPullDownRefresh();
            			},
            			
            	});
            },			
			changeMenuListDetailList() {				
				uni.request({
					url: this.websiteUrl+'/api.php/house/layout',
					method: 'GET',
					header: {
						'content-type':'application/x-www-form-urlencoded'						
					},
					success: function(res){				
						let tempDetailList_layout = res.data.data.layout
						let tempDetailList_area = res.data.data.area
						
						_self.menuList[0].detailList = tempDetailList_area
						_self.menuList[0].detailList.unshift({
				                'title': '区域',
				                'value': ''
				            })
						_self.menuList[2].detailList = tempDetailList_layout
						_self.menuList[2].detailList.unshift({
						        'title': '户型',
						        'value': ''
						    })	
					},				
				});																				
			},
			getmorenews: function() {			   
				if(_self.status !== 'more'){
					return false
				}						    
				_self.status = 'loading'
			    uni.showNavigationBarLoading();//显示加载动画
			    uni.request({
			        url:this.websiteUrl+'/userapi.php/house/houseList?page='+page,
			        method: 'POST',
					data: {
						keywords:_self.keywords,
						layout:_self.single,
						area_id:_self.area_id,
						price: _self.price,
						sort:_self.sort
					},					
			        success: function(res) {			           																		
			            if (res.data.data.data.length == 0) {//没有数据			                
							_self.status = 'noMore'					
			                uni.hideNavigationBarLoading();//关闭加载动画							
			                return false;
			            }
			            page++;//每触底一次 page +1										
			            _self.houseall = _self.houseall.concat(res.data.data.data);//将数据拼接在一起			            
						_self.status = 'more'					
			            uni.hideNavigationBarLoading();//关闭加载动画
			        }
			    });
			},						
			gethouseall(){
				page = 1;
				_self.status = 'more'
				uni.showNavigationBarLoading();	
				uni.request({
					url: this.websiteUrl+'/userapi.php/house/houseList?page=1',
					method: 'POST',
					header: {
						'content-type':'application/x-www-form-urlencoded'						
					},
					data: {
						keywords:_self.keywords,
						layout:_self.single,
						area_id:_self.area_id,
						price: _self.price,
						sort:_self.sort
					},
					success: function(res){
						page++
						_self.houseall = res.data.data.data
						uni.hideNavigationBarLoading();
						uni.stopPullDownRefresh();//得到数据后停止下拉刷新
					},
					
				});
			},
			onNavigationBarSearchInputChanged(e) {				
				_self.keywords = e.text
				console.log(_self.price)
				
				
				
			    this.gethouseall()				
			},
        }
    }
</script>
<style>
    .center {	
		display: flex;
		flex-direction: column;
		align-items: center;
		width:100%;
	}
	
	.visitprint{
		width:100%;
		height: 264rpx;
	}
	
	.visitprint .left{
		padding-left:32rpx;
		width:240rpx;
		height: 200rpx;
		padding-top:32rpx;
		float:left;
	}
	
	.visitprint .right{
		width:422rpx;
		height: 200rpx;
		margin-left:24rpx;
		float:left;
	}
	
	.right .title{
		font-size:30rpx;
		line-height: 42rpx;
		color:#373737;
		padding-top:32rpx;
	}
	
	.right .location{
		width:100%;
		height: 34rpx;
		margin-top:12rpx;
	}
	
	.right .location image{
		width:28rpx;
		height: 28rpx;
		float:left;
	}
	
	.right .location .note{
		float:left;
		font-size:24rpx;
		line-height: 34rpx;
		color:#999999;
		margin-left:12rpx;
	}
	
	
	.right .price{
		font-size:32rpx;
		line-height:48rpx;
		margin-top:12rpx;		
	}

</style>
